<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="drawer.show_add = true"
				>
					添加资源
				</el-button>
				<el-button icon="el-icon-download" @click="exported"
					>导出</el-button
				>
				<el-button @click="batchDistribution(0)">批量分配</el-button>
				<el-button @click="batchRetrieve">批量回收</el-button>
				<!-- <el-button @click="deleteList">批量删除</el-button> -->
				<el-button @click="getStall">替换美妆顾问</el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				v-bind="list"
				tableName="clueList"
				row-key="id"
				stripe
				:hidePropOrder="true"
			>
				<el-table-column type="selection" width="50"></el-table-column>
				<template #visitorName="scope">
					<el-link
						:underline="false"
						type="primary"
						:href="`#/clue/detail/${scope.row.id}`"
						>{{ scope.row.visitorName }}</el-link
					>
				</template>
			</scTable>
		</el-main>

		<!-- 添加资源 -->
		<AddClue v-if="drawer.show_add" @close="drawer.show_add = false" @reload="search"/>
		<scFileImport
			ref="scFileImport"
			:apiObj="importExcel.apiObj"
			:templateUrl="importExcel.templateUrl"
		></scFileImport>

		<!-- 协作人 -->
		<SelectStaff ref="selectRef" :staffType=20 @confirm="sureReplace"/>
		<el-dialog
			top="30vh"
			v-model="distributionVisible"
			:title="
				dialogTitleMark == 0
					? '确认分配？'
					: dialogTitleMark == 1
					? '批量回收'
					: '确认替换？'
			"
			:width="dialogWidth"
		>
			<div class="dialog-content">
				<div class="textarea" v-if="dialogTitleMark == 1">
					<div>
						本次共回收{{
							$refs.table.tableSelection.length
						}}资源，请输入回收原因
					</div>
					<div>
						<el-input
							v-model="retrieveReson"
							maxlength="240"
							placeholder="请输入回收原因"
							show-word-limit
							type="textarea"
						/>
					</div>
				</div>
				<div v-else>
					<el-select
						v-model="distributionStaff"
						filterable
						placeholder="请选择员工"
					>
						<el-option
							v-for="item in staffOption"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button
						type="primary"
						@click="sureBatChOperate(dialogTitleMark)"
					>
						确定
					</el-button>
					<el-button @click="distributionVisible = false">
						取消
					</el-button>
				</span>
			</template>
		</el-dialog>
	</el-container>
</template>

<script>
import SearchForm from "@/components/SearchForm/index.vue";
import AddClue from "./components/AddClue/index.vue";
import scFileImport from "@/components/scFileImport";
import SelectStaff from "@/components/SelectStaff/index.vue";

import { formColumn, column } from "./data";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
	components: {
		SearchForm,
		AddClue,
		scFileImport,
		SelectStaff
	},
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.clue.list,
				params: {},
				column,
			},
			drawer: {
				show_add: false,
			},
			importExcel: {
				templateUrl:
					"https://binaries.templates.cdn.office.net/support/templates/zh-cn/tf45048037_win32.xltm",
				apiObj: {
					post: () => Promise.resolve([]),
				},
			},
			distributionVisible: false,
			staffOption: [
				{
					value: 1,
					label: "姓名：张三 手机号：13021034102 部门：大朗",
				},
				{
					value: 2,
					label: "姓名：李四 手机号：13021834102 部门：大朗",
				},
			],
			distributionStaff: null,
			dialogTitleMark: 0,
			dialogWidth: "500px",
			retrieveReson: "",
		};
	},
	mounted(){
		this.selectIntrodEmployeeApi()
	},
	methods: {
		selectIntrodEmployeeApi(){
			this.$API.student.selectIntrodEmployee.get().then((res) => {
				this.staffOption = res.data.records.map(item =>{
					var obj = {
						value: item.id,
						label: "姓名："+ item.memberName +" 手机号："+ item.memberPhone +" 部门:"+ item.memberQuality,
					}
					return obj;
				})

			})
		},
		search(searchParams) {
			let params = {};
			if (searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams));
				params = Object.assign({}, searchObj, this.list.params);
			} else {
				params = Object.assign({}, this.list.params, {});
			}
			console.log(params);
			this.$refs.table.reload(params);
		},
		addStudent() {
			this.visible = true;
		},
		importStundentsExcel() {
			this.$refs.scFileImport.open();
		},
		// 批量删除
		deleteList() {
			const tableSelection = this.$refs.table.tableSelection;
			if (tableSelection.length > 0) {
				ElMessageBox.confirm("确认删除?", "信息", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					buttonSize: "small",
				})
					.then(() => {
						this.$API.clue.delete
							.post({
								ids: tableSelection.map((item) => item.id),
							})
							.then((res) => {
								if (res.code === "0") {
									ElMessage({
										type: "success",
										message: "删除成功",
									});
									this.$refs.table.getData();
								} else {
									ElMessage({
										type: "error",
										message: res.message,
									});
								}
							});
					})
					.catch(() => {});
			} else {
				ElMessage({
					message: "请选择学员",
					type: "warning",
				});
			}
		},

		getStall() {
			if (this.$refs.table.tableSelection.length > 0) {
				const title = "美妆顾问"
				this.$refs.selectRef.openDialog(title)
			} else {
				ElMessage({
					message: "请选择学员",
					type: "warning",
				});
			}
		},

		// 按钮操作
		batchDistribution(mark) {
			if (this.$refs.table.tableSelection.length > 0) {
				this.dialogWidth = "500px";
				this.dialogTitleMark = mark;
				this.distributionVisible = true;
			} else {
				ElMessage({
					message: "请选择学员",
					type: "warning",
				});
			}
		},
		// 导出
		exported() {
			const tableSelection = this.$refs.table.tableSelection;
			const isOk = tableSelection.length > 0 ? true : false;
			if (isOk) {
				this.$refs.table.refresh();
				console.log("导出");
			}
			ElMessage({
				message: isOk ? "导出成功" : "请选择学员",
				type: isOk ? "success" : "warning",
			});
		},
		// 批量回收
		batchRetrieve() {
			if (this.$refs.table.tableSelection.length > 0) {
				this.dialogWidth = "540px";
				this.dialogTitleMark = 1;
				this.distributionVisible = true;
			} else {
				ElMessage({
					message: "请选择学员",
					type: "warning",
				});
			}
		},

		// 确认批量操作
		sureBatChOperate(mark) {
			const tableSelection = this.$refs.table.tableSelection;
			if (mark !== 1) {
				if (this.distributionStaff || this.distributionStaff == 0) {
					if (this.dialogTitleMark == 0) {
						// 批量分配
						this.sureDistribution(tableSelection);
					} else {
						// 替换跟进协作人
						this.sureReplace(tableSelection);
					}
					this.distributionVisible = false;
				} else {
					ElMessage({
						message: "请选择员工",
						type: "warning",
					});
				}
			} else {
				if (this.retrieveReson) {
					this.distributionVisible = false;
				} else {
					ElMessage({
						message: "请输入回收原因",
						type: "warning",
					});
				}
			}
		},

		// 确认批量分配
		sureDistribution(selectList) {
			ElMessage({
				message: "分配成功",
				type: "success",
			});
			const data = {
				visitor: selectList,
			};
			this.$API.clue.batchAllocation.post(data).then(() => {
				this.$refs.table.getData();
			});
		},
		// 确认批量替换跟进协作人
		sureReplace(selectList) {
			console.log(selectList);
			ElMessage({
				message: "替换成功",
				type: "success",
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.dialog-content {
	.el-select {
		width: 100%;
	}
	.textarea {
		& > div:nth-child(1) {
			padding-bottom: 10px;
			color: #666666;
		}

		& > div {
			::v-deep .el-textarea {
				.el-textarea__inner {
					min-height: 172px !important;
				}
			}
		}
	}
}
</style>
